<template>
  <div class="describe">
    <div class="desc_box" style="padding-top: 20px">
      <p class="title">歌手简介</p>
      <p class="txt">{{briefDesc}}</p>
    </div>
    <div class="desc_box" v-for="(item, index) in introduction" :key="index">
      <p class="title">{{item.ti}}</p>
      <p class="txt" v-html="item.txt.replace(/\n/g,'<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;')"></p>
    </div>
  </div>
</template>

<script>
import {home} from "@/network/home";

export default {
  name: "SingerDesc",
  data(){
    return {
      id:this.$route.params.id,
      briefDesc:'',     //基本描述
      introduction:[],  //主要经历
    }
  },
  watch:{
    //监听歌手id是否变化，变化就更新数据
    '$route.params.id'(){
      //获取相似歌手数据
      this.getSingerDesc(this.$route.params.id)
    },
  },
  created() {
    //请求歌手详情数据
    this.getSingerDesc(this.id)
  },
  methods:{
    //获取歌手描述数据的函数
    getSingerDesc(id){
      home.getSingerDesc(id).then(res => {
        this.briefDesc = res.data.briefDesc
        this.introduction = res.data.introduction
        console.log(res);
      })
    },
  },
}
</script>

<style scoped>
.desc_box{
  padding-bottom: 20px;
}
.title{
  font-weight: 700;
  font-size: 14px;
  color: #2a2727;
  line-height: 30px;
}
.txt{
  text-indent:2em;
  font-size: 13px;
  line-height: 28px;
}
</style>
